<template>
  <div id="app">
    <!--<img src="./assets/logo.png">-->
    <div class="fonh">
      <div :class="Classhd" v-show="!ddd">
        <!--登录页面-->
        <!--接收 子组件 传来的值-->
        <login v-on:chuangzhi = "chuang"></login>
      </div>
      <!--:class="this.ddd==1?Classhd:''"-->
      <div :class="Classhd" v-show="ddd">
        <!--主页面-->
        <div class="head"><hoad :cv="cvs"></hoad></div>
        <div class="con">
          <div class="lefts">
            <lefts ></lefts><!--:lfs="lfs"-->
          </div>
          <div class="nrs">
            <cont v-bind:username='home'></cont>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  //导入子组件
  import hoad from './components/hoad.vue';
  import left from './components/left.vue';
  import cont from './components/cont.vue';
  import login from './components/login.vue';

  export default {
     name: 'App',
   /* props:["chuangzhi"],//接收newinfo组件传递的值*/

    data(){
       return{
         cvs:'',//传值给 hoad
         home:'',
         ddd:false,
         Classhd:'hs',
       }
    },
    created(){
      //cookie
      //sessionStorage
    },
    methods:{
      chuang:function (input) {  // input = login.vue--> this.ss  索引值
        //判断 用户名 密码 正确后执行 换页
        this.ddd = !this.ddd;
        this.cvs = input;
        this.home = input;
        //console.log(input,this.cvs)
      }
    },
     components:{
       //注册子组件
       hoad: hoad,
       lefts:left,
       cont:cont,
       login:login
     }
}
</script>

<style >
  html ,body{height:100%;}
  body,div,ul,li{margin: 0;padding: 0}
  li{list-style-type: none}


  .fonh,.hs{width: 100%;height:100%;}
  /*.fonh>div{display: none}*/
  /*.fonh>div.hs{display:block}*/
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  min-width: 700px;
  height: 100%;
  min-height: 420px;
}
  #app .head{height: 15%;box-sizing: border-box}
  .con{
    display: flex;
    height: 85%;
  }
  .con>div.lefts{
    flex:1;
    }
  .con>div.nrs{
    flex:5;

  }
</style>
